<template>
  <el-row :gutter="10" class="rowI">
    <el-col :span="1">
      <div style="width: 5px;height: 100%;background-color: #22ccee;float: right"></div>
    </el-col>
    <el-col :span="23">
      <p style="font-weight: bold;float: left">新建科室</p>
    </el-col>
  </el-row>
  <el-row class="rowI">
    <el-col :span="12">
      <el-row>
        <el-col :span="10">
          <div class="divLeft">科室名称 :</div>
        </el-col>
        <el-col :span="14">
          <el-input v-model="department.name" class="colInput" :disabled="check"/>
        </el-col>
      </el-row>
    </el-col>
    <el-col :span="12">
      <el-row>
        <el-col :span="2">
          <div class="divRight">科室编号 :</div>
        </el-col>
        <el-col :span="22">
          <el-input class="colInput" disabled/>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
  <el-row class="rowI">
    <el-col :span="12">
      <el-row>
        <el-col :span="10">
          <div class="divLeft">上级科室 :</div>
        </el-col>
        <el-col :span="14">
          <el-select v-model="department.level" placeholder="请选择"
                     class="colInput" :disabled="check">
            <el-option v-for="d in departmentLevel" :label="d.name" :value="d.id"/>
          </el-select>
        </el-col>
      </el-row>
    </el-col>
    <el-col :span="12">
      <el-row>
        <el-col :span="2">
          <div class="divRight">联系人 :</div>
        </el-col>
        <el-col :span="22">
          <el-select v-model="department.doctorId" placeholder="请选择"
                     class="colInput" @change="selectChange" :disabled="check">
            <el-option v-for="d in doctors" :label="d.nickname" :value="d.id"/>
          </el-select>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
  <el-row class="rowI">
    <el-col :span="12">
      <el-row>
        <el-col :span="10">
          <div class="divLeft">联系电话 :</div>
        </el-col>
        <el-col :span="14">
          <el-input v-model="department.contactMobile" class="colInput" disabled/>
        </el-col>
      </el-row>
    </el-col>
    <el-col :span="12">
      <el-row>
        <el-col :span="2">
          <div class="divRight">状态 :</div>
        </el-col>
        <el-col :span="22">
          <el-select v-model="department.status" placeholder="请选择"
                     class="colInput" :disabled="check">
            <el-option v-for="item in c1" :value="item.value"/>
          </el-select>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
  <el-row class="rowI">
    <el-col :span="4">
      <div style="margin-left: 240px;width: 100px;line-height: 30px">描述说明 :</div>
    </el-col>
    <el-col :span="20">
      <el-input v-model="department.content" type="textarea" :rows="10"
                style="width: 875px;margin-left: -330px" :disabled="check"/>
    </el-col>
  </el-row>
  <div v-if="check||change">
    <el-row class="rowI">
      <el-col :span="12">
        <el-row>
          <el-col :span="10">
            <div class="divLeft">创建人 :</div>
          </el-col>
          <el-col :span="14">
            <el-input v-model="department.createUser" class="colInput" disabled/>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12">
        <el-row>
          <el-col :span="2">
            <div class="divRight">创建时间 :</div>
          </el-col>
          <el-col :span="22">
            <el-input v-model="department.gmtCreate" class="colInput" disabled/>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row class="rowI">
      <el-col :span="12">
        <el-row>
          <el-col :span="10">
            <div class="divLeft">修改人 :</div>
          </el-col>
          <el-col :span="14">
            <el-input v-model="department.updateUser" class="colInput" disabled/>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12">
        <el-row>
          <el-col :span="2">
            <div class="divRight">修改时间 :</div>
          </el-col>
          <el-col :span="22">
            <el-input v-model="department.gmtModified" class="colInput" disabled/>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row class="rowI">
      <el-col :span="4">
        <div style="margin-left: 240px;width: 100px;line-height: 30px">状态说明 :</div>
      </el-col>
      <el-col :span="20">
        <el-input v-model="department.statusContent" type="textarea" :rows="5"
                  style="width: 875px;margin-left: -330px" :disabled="check"/>
      </el-col>
    </el-row>
  </div>
  <div v-if="!check">
    <el-row style="margin-top: 50px">
      <el-col :span="12">
        <el-button style="width: 80px;background-color: #409EFF;
                 color: white;margin-left: 300px" @click="save">提交
        </el-button>
      </el-col>
      <el-col :span="12">
        <el-button style="width: 80px;background-color: white;
      color: #409EFF;border: 1px solid #409EFF;margin-right: 350px"
                   @click="router.push('/admin/department')">返回
        </el-button>
      </el-col>
    </el-row>
  </div>
  <div v-else>
    <el-button style="width: 160px;background-color: white;
      color: #409EFF;border: 1px solid #409EFF"
               @click="router.push('/admin/department')">返 &nbsp; &nbsp; &nbsp; 回
    </el-button>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import router from "@/router";
import {ElMessage} from "element-plus";
import axios from "axios";
import qs from "qs";

const userToken = ref(localStorage.getItem('user-token')?
    JSON.parse(localStorage.getItem('user-token')):null);
const userId = ref(localStorage.getItem('user-id')?
    JSON.parse(localStorage.getItem('user-id')):null);

onMounted(()=>{
  if (userToken.value == null) {
    ElMessage.error("请先登录!");
    router.push('/patient/login');
    return;
  }
  axios.defaults.headers.common['Authorization']=userToken.value;
  if (location.search.includes('id')) {
    let id = new URLSearchParams(location.search).get('id');
    axios.get(BASE_URL + '/v1/department/' + id + '/select').then((response) => {
      if (response.data.code === 20000) {
        check.value = true;
        department.value = response.data.data;
      }
    })
  }else if (location.search.includes('Id')) {
    let id = new URLSearchParams(location.search).get('Id');
    axios.get(BASE_URL + '/v1/department/' + id + '/select').then((response) => {
      if (response.data.code === 20000) {
        change.value = true;
        department.value = response.data.data;
      }
    })
    axios.get(BASE_URL+'/v1/department/'+id+'/select-level').then((response) => {
      if (response.data.code === 20000) {
        departmentLevel.value = response.data.data;
      }
    })
  }else {
    axios.get(BASE_URL + '/v1/department/select-level').then((response) => {
      if (response.data.code === 20000) {
        departmentLevel.value = response.data.data;
      }
    })
  }
  axios.get(BASE_URL + '/v1/doctors/type').then((response) => {
    if (response.data.code === 20000) {
      doctors.value = response.data.data;
    }
  })
})

const selectChange = (index) => {
  for (let i = 0; i < doctors.value.length; i++) {
    if (doctors.value[i].id === index) {
      department.value.contactMobile = doctors.value[i].mobile;
      break;
    }
  }
}
const change = ref(false);
const check = ref(false);
const department = ref({});
const c1 = ref([{value: '启用'}, {value: '禁用'}])
const departmentLevel = ref([])
const doctors = ref([])

const save = () => {
  if (department.value.name == null) {
    ElMessage.error("请填写科室名称!");
    return;
  }
  if (department.value.status == null) {
    ElMessage.error("请选择状态!");
    return;
  }
  if (department.value.id == null) {
    department.value.userId = userId.value;
    let data = qs.stringify(department.value);
    axios.post(BASE_URL + '/v1/department/insert', data).then((response) => {
      if (response.data.code === 20000) {
        ElMessage.success("新建科室成功!")
        router.push('/admin/department')
      } else {
        ElMessage.warning(response.data.message)
      }
    })
  }else {
    let data = qs.stringify(department.value);
    axios.post(BASE_URL + '/v1/department/'+userId.value+'/update' , data).then((response)=>{
      if (response.data.code === 20000) {
        ElMessage.success("修改科室成功!")
        router.push('/admin/department')
      }else {
        ElMessage.warning(response.data.message)
      }
    })
  }
}
</script>

<style scoped>
.colInput {
  margin-right: 360px;
  width: 300px
}

.rowI {
  margin-bottom: 20px
}

.divLeft {
  margin-left: 55px;
  width: 270px;
  height: 30px;
  line-height: 30px;
  text-align: right
}

.divRight {
  margin-left: -55px;
  width: 150px;
  height: 30px;
  line-height: 30px;
  text-align: right
}
</style>